{{js "js/create.js"}}
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="page-header" id="apiTitleContainer">
                <h2>Add New API</h2>
            </div>
            <div class="col-md-10" data-toggle="loading" data-loading-style="overlay"
                 data-loading-text="Creating API ..." data-loading-inverse="true">
                <!-- Name version context input fields-->
                <div class="row basic-inputs ">
                    <div class="col-xsm-12 col-lg-4">
                        <div class="input-group input-wrap res-wrap">
                            <label class="control-label">Name</label><span class="requiredAstrix">*</span>
                            <input id="new-api-name" type="text" class="form-control" placeholder="MyAPIName"
                                   required>
                        </div>
                    </div>
                    <div class="col-xsm-12 col-lg-4">
                        <div class="input-group input-wrap res-wrap">
                            <label class="control-label">Context</label><span class="requiredAstrix">*</span>
                            <input id="new-api-context" type="text" class="form-control"
                                   placeholder="APIContext"
                                   required>
                        </div>
                    </div>
                    <div class="col-xsm-12 col-lg-4">
                        <div class="input-group input-wrap res-wrap">
                            <label class="control-label">Version</label><span class="requiredAstrix">*</span>
                            <input id="new-api-version" type="text" class="form-control" placeholder="1.0.0"
                                   required>
                        </div>
                    </div>
                </div>

                <!-- Tab view for different api input methods -->
                <div class="row add-padding-top-5x">
                    <h4>Implementation Method</h4>
                    <div class="col-xs-3"> <!-- required for floating -->
                        <!-- Nav tabs -->
                        <form class="form-horizontal" id="implementation-option-form">
                            <ul class="impl-selection">
                                <li class="active">
                                    <label class="radio apim-pub-new-api">
                                        <input type="radio" name="implementation-options" value="endpoint-option"
                                               checked="checked" data-tab="endpointTab">
                                        <span class="helper">Endpoint</span>
                                    </label>
                                </li>
                                <li class="">
                                    <label class="radio apim-pub-new-api no-border">
                                        <input type="radio" name="implementation-options" value="swagger-option"
                                               data-tab="swaggerTab">
                                        <span class="helper">Import Swagger</span>
                                    </label>
                                </li>
                                <li class="">
                                    <label class="radio apim-pub-new-api no-border">
                                        <input type="radio" name="implementation-options" value="mock-option"
                                               data-tab="mockTab">
                                        <span class="helper">Mock</span>
                                    </label>
                                </li>
                            </ul>
                        </form>
                    </div>
                    <div class="col-xs-9 impl-content">
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div class="tab-pane active" id="endpointTab">
                                <form class="form-horizontal sub-implementation-option" id="endpoint-option-form">
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <input id="endpoint-url" name="wsdl-url" class="form-control input-small"
                                                   type="text" placeholder="E.g.: http://appserver/resource">
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane" id="swaggerTab">
                                <form class="form-horizontal sub-implementation-option" id="swagger-option-form">
                                    <div class="form-group">
                                        <div class="col-sm-12 toggleRadios">
                                            <label class="radio sub-labels urlSelect-label"> <input
                                                    type="radio"
                                                    checked="checked"
                                                    name="import-definition"
                                                    value="swagger-url">
                                                <span
                                                        class="helper">Swagger URL</span>
                                            </label>
                                            <label class="radio sub-labels">
                                                <input type="radio"
                                                       name="import-definition"
                                                       id=""
                                                       value="swagger-file"> <span
                                                    class="helper">Swagger File</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group toggleContainers">
                                        <div class="controls col-sm-12">
                                            <div>
                                                <input name="swagger-url" id="swagger-url" class="form-control"
                                                       title="swagger url"
                                                       type="text"
                                                       checked="checked"
                                                       placeholder="http://petstore.swagger.io/v2/swagger.json">
                                            </div>
                                        </div>
                                        <div class="controls col-sm-12">
                                            <div class="input-group input-wrap file-upload-control hidden">
                                                <input type="text" placeholder="Click on brows to add a file" class="form-control" readonly="">
                                                <input name="swagger-file" id="swagger-file" type="file" class="form-control" multiple=""/>
                                                <div class="input-group-btn">
                                                    <button class="btn browse" type="button" title="Browse File">
                                                        <i class="fw fw-file-browse" aria-hidden="true"></i>
                                                        <span class="hidden-xs">Browse</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane" id="mockTab"></div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <!-- Button -->
                <hr/>
                <button id="api-create-submit" class="btn btn-primary" data-toggle="modal"
                        data-target="#myModal2">Create API
                </button>
            </div>
        </div>
    </div>
</div>